<template>
    <div>
        <detail-banner :sightName="sightName" 
        :bannerImg="bannerImg"
        :gallaryImgs="gallaryImgs"></detail-banner>
        <detail-header></detail-header>
        <detail-list :categoryList="categoryList" ></detail-list>
       
    </div>
</template>
<script>
import DetailBanner from './components/Banner'
import DetailHeader from './components/Header'
import DetailList from './components/List'
import axios from 'axios'
export default {
    name:'Detail',
    components:{
        DetailBanner,
        DetailHeader,
        DetailList
    },
    data(){
        return {
            sightName:'',
            bannerImg:'',
            gallaryImgs:[],
            categoryList:[]
        }
    }
    ,
    methods:{
       getDetailInfoSucc(res){    
       res=res.data
       if (res.ret&&res.data) {
             console.log(res.data.sightName);
             this.sightName=res.data.sightName
             this.bannerImg=res.data.bannerImg
             this.gallaryImgs=res.data.gallaryImgs
             this.categoryList=res.data.categoryList
       }
     
       },
       getDetailInfo(){
 // 为给定 ID 的 user 创建请求
axios.get('/api/detail.json',{
        params: {
          id: this.$route.params.id
        }
      })
  .then(this.getDetailInfoSucc)
  .catch(function (error) {
    console.log(error);
  });
       }
    },
    mounted:function(){
     this.getDetailInfo()  
    }
}
</script>
<style lang="stylus" scoped>
  @import '~styles/mixins.styl'

</style>
